<script setup lang="ts">
const props = defineProps({
  boxColor: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  name: {
    type: String,
    required: true,
  }
});


</script>

<template>
  <div>
    <dl>
      <dt :style="{ backgroundColor: props.boxColor }">图</dt>
      <dd>
        <!-- item.title -->
        <!-- <span>图</span> -->
        <div class="van-multi-ellipsis--l2">{{ props.title }}</div>
        <span>{{ props.name }}</span>
      </dd>
    </dl>
  </div>
</template>


<style scoped lang="scss">
$size: 0.5rem;
$font-color: white;
$color: rgb(254, 205, 71);

dl {
  width: 170px;
  height: 260px;

  dt {
    width: 100%;
    height: 45%;
    font-size: $size;
    color: $font-color;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  dd {
    height: 50%;
    padding: 8px 8px 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    span {
      font-size: $size;
    }
    .van-multi-ellipsis--l2{
      font-size: $size;
    }

  }
}
</style>
